<template>
	<view class="tea-room-app">
		<view >
			<!-- <view style="display: flex;height: 50rpx;">
			</view> -->
			<view class="icon-panel">
				<view class="icon-panel-item" style="" @click.stop="showOpenHouseDialog">
					<image src="../../../static/v3/0001.png"></image>
					<view class="text">开门</view>
				</view>
				<view class="icon-panel-item" @click.stop="goPage('/pages/user/order/list')">
					<image src="../../../static/v3/0002.png"></image>
					<view class="text">续单</view>
				</view>
				<view class="icon-panel-item" @click.stop="wifiModal.show = true">
					<image src="../../../static/v3/0003.png"></image>
					<view class="text">WIFI</view>
				</view>
				<!-- <view class="icon-panel-item" @click="goPage('/pages/tea/voucher/index')">
					<image src="../../../static/v3/0003.png"></image>
					<view class="text">福利中心</view>
				</view>
				<view class="icon-panel-item" @click="goPage('/pages/tea/voucher/index?tabIndex=2')">
					<image src="../../../static/v3/scan.png"></image>
					<view class="text">抖音验券</view>
				</view>
				<view class="icon-panel-item" @click="goPage('/pages/tea/voucher/index?tabIndex=2')">
					<image src="../../../static/v3/meituan.png"></image>
					<view class="text">美团验券</view>
				</view> -->
			</view>
			<modal
				:show="wifiModal.show"
				@close="wifiModal.show = false"
				@cancel="wifiModal.show = false"
				:show-footer="false"
				:show-confirm="false"
				:show-cancel="false"
				confirm-text="确定"
				cancel-text="关闭"
			>
				<view style="border-bottom: 1px solid lightgrey">
					<div class="open-control-item" style="margin-top: 45rpx">
						<view
							style="
								text-align: center;
								font-weight: bold;
								padding: 10px;
								font-size: 20rpx;
								display: inline-flex;
							"
						>
							WiFi账号：15555555555
						</view>
						<view
							style="
								text-align: center;
								font-weight: bold;
								padding: 10px;
								font-size: 20rpx;
								display: inline-flex;
							"
						>
							WiFi密码：66666666
						</view>
						<view class="btn-sm btn-primary" @click="copyWifiPassword()">复制密码</view>
						<!-- <Button class="open-control open-control-room" @click="connectWifi()">一键连接</Button> -->
					</div>
				</view>
			</modal>
			<div class="page-section-spacing">
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular>
					<swiper-item v-for="(item, index) in homeSlide" :key="index">
						<image :src="item" @click="goPage('/pages/tea/v2/joinus')"></image>
					</swiper-item>
				</swiper>
			</div>
			
		</view>

		<view class="content">
			<view class="store-info">
				<view class="info-room">
					<view class="room-left">
						<image class="room-icon" v-if="!teaHouse.images" src="../../../static/default_img.png" />
						<image
							class="room-icon"
							v-if="teaHouse.images"
							:src="teaHouse.images"
						/>
						<view class="room-name">{{ teaHouse.name }}</view>
					</view>
					<view class="btn-icon">
						<view class="btn-item" @click.stop="showMapInfo(teaHouse)">
							<image class="store-icon" src="/static/map-point.png"></image>
						</view>
						<view class="btn-item" @click="callPhone(teaHouse)">
							<image class="store-icon" src="/static/service.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="room-select">
			<view class="cou-box" style="">
				<view class="cou-box-dis" style="" @click="goPage('/pages/tea/voucher/index?tabIndex=2')">
					<view class="cou-box-dis-bgc" style="">
					</view>
					<view class="cou-box-dis-title" style="">
						团购验券
					</view>
					<view class="cou-box-dis-name" style="">
						美团 抖音券 >
					</view>
					<view class="cou-box-dis-image" style="">
						<image src="/static/index/2221png.png" mode=""></image>
					</view>
				</view>
				<view class="cou-box-dis" style="" @click="goPage('/pages/tea/voucher/index?tabIndex=1')">
					<view class="cou-box-dis-bgc" style="">
					</view>
					<view class="cou-box-dis-title" style="">
						充值中心
					</view>
					<view class="cou-box-dis-name" style="">
						充值享受大额折扣
					</view>
					<view class="cou-box-dis-image" style="">
						<image src="/static/index/3331.png" mode=""></image>
					</view>
				</view>
			</view>
			
			
			<view class="items" v-for="(item, key) in listData.items" :key="key">
				<view class="item" @click.stop="goRoomDetail(item)">
					<view class="room-image">
						<image v-if="!item.images" src="../../../static/default_img.png" />
						<image
							v-if="item.images"
							:src="item.images"
						/>
						<view :class="'room-status room-status-' + item.roomState">
							<view v-if="item.roomState == 1 || !item.roomState">空闲中</view>
							<view v-if="item.roomState == 5">使用中</view>
							<view v-if="item.roomState == 6">保洁中</view>
						</view>
					</view>
					<view class="room-info">
						<view>
							<view class="name">{{ item.roomName }}</view>
							<!-- <view class="desc" v-if="item.remark">备注：{{ item.remark }}</view> -->
							<view class="tags" >
								<span v-for="tag in item.labels" class="tag">{{tag}}</span>
								
							</view>
						</view>
						<view class="bottom-info">
							<view class="price-info" v-if="item.priceMode === 0">
								现价：￥
								<view class="price">{{ item.price / 100 }}</view>
								/小时
							</view>
							<view class="discount-info" v-if="item.priceMode === 1 || item.priceMode === 2">
								<view class="items" v-for="(pckItem, keyPck) in item.roomPackages" :key="keyPck">
									{{ pckItem.hours }}小时套餐：
									<view class="price">{{ pckItem.price / 100 }}元</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="time-line" style="display: none">
					<view>
						<view class="item">
							<view v-for="(item, index) in nums" :key="index">
								<view>
									{{ item }}
								</view>
							</view>
						</view>
						<view style="display: flex">
							<view
								v-for="(item, index) in nums"
								:key="index"
								:style="{ width: 100 / nums.length + '%' }"
								style="background: #f00; height: 2upx"
							>
								<view v-for="(deepitem, dindex) in colorDeeps" :key="dindex">
									<view v-if="item >= deepitem.start && item < deepitem.end" class="deep"></view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<div class="hour-flex-box">
					<div class="hour-item" v-for="(hourItem, index) in item.notFinishedTimes" :key="index">
						<div :class="['hour-square', hourItem.checked ? 'hour-square-blue' : '']"></div>
						<div class="hour-num">{{ hourItem.num }}</div>
					</div>
				</div>
				<div class="hour-tip-flex-box">
					<view class="hour-tip-info">
						<div class="hour-tip-item">
							<div class="hour-square-blue"></div>
							<div>已预定时段</div>
						</div>
						<div class="hour-tip-item">
							<div class="hour-square"></div>
							<div>可预定时段</div>
						</div>
					</view>
					<view class="booking-btn" @click="goRoomDetail(item)">去下单</view>
				</div>
			</view>
			<view
				v-if="showCount == 0"
				style="text-align: center; background-color: white; padding: 20upx; margin-top: 20upx"
			>
				暂无可选房间
			</view>
		</view>
		<modal
			:show="openHouseDialog.show"
			@close="openHouseDialog.show = false"
			@cancel="openHouseDialog.show = false"
			:show-footer="false"
			:show-confirm="false"
			:show-cancel="false"
			confirm-text="确定"
			cancel-text="关闭"
		>
			<view v-for="order in orderList" style="border-bottom: 1px solid lightgrey">
				<div class="open-control-item" style="margin-top: 45rpx">
					<view
						style="
							text-align: center;
							font-weight: bold;
							padding: 10px;
							font-size: 20px;
							display: inline-flex;
						"
					>
						{{ order.roomName }}
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-around;">
						<!-- <view class="open-control-door" @click="openHouseDoor(order.orderNO)">开大门</view> -->
						<view class="open-control-door" @click="openRoomDoor(order.orderNO)">开包厢</view>
					</view>
					
				</div>
			</view>
		</modal>

		<customTarbar :selected="0"></customTarbar>
	</view>
</template>

<script>
import util from '@/libs/util.js';
import globalConfig from '../../../config';
import Modal from '@/components/neil-modal/neil-modal.vue';
import myTimer from '@/components/my-timer.vue';
import customTarbar from '@/components/tarbar/custom-tarbar.vue';
const baseHttp = globalConfig.API_HOST;

export default {
	components: {
		Modal,
		myTimer,
		customTarbar
	},
	data() {
		return {
			wifiModal: {
				show: false,
				wifiAccount: '',
				wifiPassword: '88888888'
			},
			openHouseDialog: {
				show: false
			},
			isLogin: false,
			orderList: [],
			baseHttp: baseHttp,
			teaHouseId: '',
			mtCode: '',
			dealgroupId: '',
			showCount: 0,
			map: {},
			user: {
				level: 0
			},
			teaHouse: {
				address: '',
				des: '',
				images: '',
				joinTime: '',
				lat: '',
				lon: '',
				name: '',
				remark: '',
				teaHouseId: '',
				tel: ''
			},
			teaConfig: {
				deposit: '',
				vipMoney: '',
				money: '',
				superVipTimes: '',
				subMemberLimit: '',
				remark: ''
			},
			listData: {
				items: []
			},
			statusLabels: ['', '空闲', '', '', '', '使用中', '保洁中'],
			homeSlide: [ 
				{
					img: '../../../static/index/banner.png'
				},
				{
					img: '../../../static/index/banner.png'
				}
			],

			nums: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
			colorDeeps: [
				{
					start: 12,
					end: 13
				}
			]
		};
	},
	onLoad(params) {
		console.log(params,96666);
		this.teaHouseId = params.teaHouseId;
		if (!this.teaHouseId) {
			let lastTeaHouseId = uni.getStorageSync('teaHouseId');
			if (lastTeaHouseId) {
				this.teaHouseId = lastTeaHouseId;
			} else {
				this.goPage('/pages/tea/v2/store');
			}
		} else {
			uni.setStorageSync('teaHouseId', this.teaHouseId);
		}
		this.mtCode = params.mtCode;
		this.dealgroupId = params.dealgroupId;
		if (this.mtCode == 'undefined') {
			this.mtCode = '';
		}
		if (this.dealgroupId == 'undefined') {
			this.dealgroupId = '';
		}
		/*
			console.log("mt code detail:"+this.mtCode);
			console.log(params);
			*/
	},
	onShow() {
		if (global.isLogin()) {
			this.isLogin = true;
		} else {
			this.isLogin = false;
			uni.removeStorageSync('isJump');
		}
		this.getTeaHouseInfo();
		this.getConfigInfo();
		this.getDataList();
		this.getUserDetail();
		let page = this;
		page.initOrder();
		setInterval(() => {
			page.initOrder();
		}, 5000);
	},
	computed: {},
	methods: {
		copyWifiPassword() {
			uni.setClipboardData({
				data: this.wifiModal.wifiPassword,
				success: function () {
					console.log('复制成功');
					// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: function () {
					console.error('复制失败');
					// 可以添加错误处理或用户友好的提示
				}
			});
		},
		...util,
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.teaHouse.tel //仅为示例
			});
		},
		showOpenHouseDialog() {
			if (!this.orderList || this.orderList.length < 1) {
				this.$Message.error('无订单或订单未开始');
				return;
			}

			this.openHouseDialog.show = true;
		},
		openHouseDoor(orderNo) {
			this.$api
				.post('/roomOrder/controlMachine', {
					machineType: 3,
					state: 1,
					orderNo: orderNo
				})
				.then((response) => {
					if (response.ret === 1) {
						this.$Message.success('操作成功');
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		openRoomDoor(orderNo) {
			this.$api
				.post('/roomOrder/controlMachine', {
					machineType: 21,
					orderNo: orderNo,
					state: 1
				})
				.then((response) => {
					if (response.ret === 1) {
						this.$Message.success('操作成功');
						this.openHouseDialog.show = false
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		initOrder() {
			if (this.isLogin) {
				this.$api.post('/roomOrder/getRenting', {}).then((response) => {
					if (response.ret === 1 && response.data && response.data.length > 0) {
						this.orderList = response.data;
					}
				});

				/*
					this.$api.post('/roomOrder/controlMachine', {
					  machineType: 3,
					  state: 1
					}).then((response) => {
					  if (response.ret===1) {
					    this.$Message.success("操作成功")
					  } else {
					    this.$Message.error(response.msg)
					  }
					});
					*/
			} else {
				var jump = uni.getStorageSync('isJump');
				if (!jump) {
					//跳转到登录页
					this.goPage('/pages/user/auth/auth');
					uni.setStorageSync('isJump', 'true');
				}
				// this.goPage('/pages/user/auth/auth')
				return false;
			}
		},
		goStore() {
			this.goPage('/pages/tea/v2/store');
		},

		goUserHome() {
			this.goPage('/pages/user/info/home');
		},
		goRoomDetail(item) {
			this.goPage(
				'/pages/tea/v2/roomDetail?roomId=' +
					item.roomId +
					'&mtCode=' +
					this.mtCode +
					'&dealgroupId=' +
					this.dealgroupId +
					'&roomState=' +
					item.roomState+'&storeName=' +
					this.teaHouse.name
			);
		},
		showMapInfo(item) {
			//console.log(item);
			//console.log(item);

			if (item.lat && item.lon) {
				//console.log(this.item.latitude)
				//console.log(this.item.longitude)

				uni.openLocation({
					latitude: item.lat,
					longitude: item.lon,
					name:item.name,
					address: item.address,
					success: function () {
						console.log('success');
					}
				});
			} else {
				this.$Message.error('当前点位没有设置坐标');
			}

			return true;
			if (this.isLogin) {
				this.goPage('/pages/tea/default/mapDetail?id=' + item.teaHouseId);
			}

			return false;
		},
		appointmentRoom(room) {
			this.$api
				.post('/room/orderRoom', {
					roomId: room.roomId
				})
				.then((response) => {
					if (response.ret === 1) {
						this.$Message.info('预约成功');
					} else {
						this.$Message.info(response.msg);
					}
				});
		},
		goToPay(room, teaHouseId) {
			if (room.roomState === 1) {
				if (this.user.level < 1) {
					this.goPage('/pages/tea/default/pay?roomId=' + room.roomId + '&teaHouseId=' + teaHouseId);
				} else {
					this.goPage('/pages/tea/default/vipPay?roomId=' + room.roomId + '&teaHouseId=' + teaHouseId);
				}
			} else {
				this.$Message.info('当前包厢不可租用');
			}
		},
		getUserDetail() {
			this.$api.post('/user/getInfo', {}).then((response) => {
				if (response.ret === 1) {
					/*
						{"data":{"depositMoney":100,"email":"","idNO":"","inviteCode":"5befc431580a4f2b8e9196ef7639ad","joinTime":"2020-12-26 21:57:17","level":2,"money":6944000,"name":"","phone":"13690060020","remark":"","updateTime":"2021-01-01 18:41:35","userId":6,"vipMoney":300},"ret":1}
						*/
					this.user = response.data;
				} else {
					this.$Message.info(response.msg);
				}
			});
		},
		toMember() {
			this.goPage('/pages/tea/default/user?teaHouseId=' + this.teaHouse.teaHouseId);
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			});
		},
		getTeaHouseInfo() {
			this.$api
				.post('/teaHouse/getById', {
					teaHouseId: this.teaHouseId
				})
				.then((response) => {
					if (response.ret === 1) {
						this.teaHouse = response.data;
						this.homeSlide=JSON.parse(response.data.bannerList)
						uni.setNavigationBarTitle({
							title: this.teaHouse.name
						});
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		getDataList() {
			/*
				{"data":[{"remark":"备注","roomId":3,"roomLevel":0,"roomNO":"10001","roomName":"高级","roomState":0,"roomType":0,"teaHouseId":2,"updateTime":"2020-12-15 16:25:47"},{"remark":"31231","roomId":7,"roomLevel":0,"roomNO":"12312","roomName":"12312","roomState":0,"roomType":0,"teaHouseId":2,"updateTime":"2020-12-23 18:50:20"}],"ret":1,"total":2}
				*/
			uni.showLoading({
				title: '加载中'
			});
			this.$api
				.post('/room/queryPage', {
					teaHouseId: this.teaHouseId,
					mtCode: this.mtCode,
					dealgroupId: this.dealgroupId
				})
				.then((response) => {
					uni.hideLoading();
					//for(let i = 0; i )
					//response.data.items = this.setField(response.data, 'show', true);
					//console.log(response.data.items);
					this.listData.items = response.data;

					this.showCount = 0;
					for (let i = 0; i < this.listData.items.length; i++) {
						//console.log(this.listData.items[i]);
						//if (this.listData.items[i].roomState===1) {
						this.showCount++;
						//}
					}

					for (let i = 0; i < this.listData.items.length; i++) {
						this.listData.items[i]['roomStateLabel'] = this.statusLabels[this.listData.items[i].roomState];
						
						this.listData.items[i].labels=this.listData.items[i].labels.split(',')
					}
					// this.hourArr = notFinishedTimes;
				});
		},
		getConfigInfo() {
			this.$api
				.post('/teaHouseConfig/getById', {
					teaHouseId: this.teaHouseId
				})
				.then((response) => {
					if (response.ret === 1) {
						if (response.data) {
							this.teaConfig = response.data;
							this.teaConfig.price = this.teaConfig.price / 100;
							this.teaConfig.deposit = this.teaConfig.deposit / 100;
							this.teaConfig.vipPrice = this.teaConfig.vipPrice / 100;
						}
					} else {
						this.$Message.error(response.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss">
page {
	/*height: 100%;*/
}
.btn-primary{
	font-size:40upx;
	margin:0 auto;
	// background-color:#1D2C6D;
	background-color:$uni-theme-color;
	color:white;
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 10upx;
	font-size: 32rpx;
	font-weight: 700;
}
.tea-room-app {
	height: 100%;
	background: #f4f4f4;
	overflow-x: hidden;
	position: relative;

	.icon-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 700rpx;
		right: 20rpx;
		z-index: 100;
		.icon-panel-item {
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #fff;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			image {
				width: 36upx;
				height: 36upx;
				border-radius: 25upx;
			}

			.text {
				color: $uni-theme-color;
				font-size: 20rpx;
			}
		}
	}

	// 轮播
	.page-section-spacing {
		width: 100%;
		.swiper {
			height: 400rpx;
			swiper-item image {
				width: 100%;
				height: 400rpx;
			}
		}
	}
	.content {
		padding: 0 20rpx;
		position: absolute;
		top: 350rpx;
		width: 100%;
		box-sizing: border-box;
	}

	// 门店信息
	.store-info {
		background: #ffffff;
		width: 100%;
		padding: 30upx 30upx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.info-room {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.room-left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.room-icon {
					width: 56rpx;
					height: 56rpx;
					border-radius: 5rpx;
				}
				.room-name {
					color: #1a1a1a;
					font-weight: 700;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.btn-icon {
				display: flex;
				.btn-item {
					flex: 1;
					width: 52rpx;
					height: 52rpx;
					background-color: $uni-theme-color;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					.store-icon {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}
		}
	}

	// 抖音充值

	// 包箱信息
	.room-select {
		margin: 90upx auto;
		padding:0 20rpx 40rpx;
		
		.cou-box{
			display: flex;align-items: center;justify-content: space-between;
			.cou-box-dis{
				width: 345rpx;height: 160rpx;position: relative;padding: 30rpx;background-color: #fff;overflow: hidden;box-sizing: border-box;
				.cou-box-dis-bgc{
					width: 160rpx;height: 110rpx;background: rgba(63, 135, 109, 0.09);position: absolute;top: 0;left: 0;border-radius: 0 0 50% 50%;
				}
				.cou-box-dis-title{
					font-size: 28rpx;color: #010101;margin-bottom: 20rpx;
				}
				.cou-box-dis-name{
					font-size: 24rpx;color: $uni-theme-color;
				}
				.cou-box-dis-image{
					position: absolute;
					right: 0;
					bottom: -28rpx;
					
					image{
						width: 112rpx;
						height: 116rpx;
					}
				}
			}
		}
		
		.items {
			background-color: white;
			border-radius: 20rpx;
			.item {
				display: flex;
				padding: 20upx;
				margin-top: 20upx;
				.room-image {
					width: 160upx;
					height: 210upx;
					margin-right: 20upx;
					image {
						width: 160upx;
						height: 210upx;
						border-radius: 10upx;
					}

					.room-status {
						text-align: center; // 文本居中
						position: relative; // 绝对定位
						// background-color: #1D2C6D; // 背景色
						background-color: $uni-theme-color; // 背景色
						color: #fff;
						font-size: 24upx;
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						bottom: 60upx;
						font-weight: bold;
						border-radius: 0 0 10upx 10upx;
					}

					.room-status-1 {
						// background-color: #1D2C6D;
						background-color: $uni-theme-color;
					}

					.room-status-5 {
						background-color: #f00;
					}

					.room-status-6 {
						background-color: #f00;
					}
				}

				.room-info {
					flex: 1;
					margin-left: 20upx;
					font-size: 32upx;
					overflow: hidden;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name {
						font-size: 28upx;
						color: #4b4b4b;
						font-weight: bold;
					}
					.desc {
						font-size: 28upx;
						color: #767676;
						margin-top: 10upx;
					}
					.tags {
						margin-top: 10rpx;
						.tag {
							display: inline-flex;
							border-radius: 10upx;
							font-size: 20upx;
							// color: #1D2C6D;
							color: $uni-theme-color;
							// border: 1px solid #1D2C6D;
							border: 1px solid $uni-theme-color;
							padding: 5upx 10upx;
							text-align: center;
							margin: 0upx 10upx 10upx 0;
						}
					}

					.bottom-info {
						display: flex;
						font-size: 26upx;
						width: 100%;
						justify-content: space-between;
						color: #f00;
						.price-info {
							display: flex;
							line-height: 28upx;
							font-size: 22upx;
							.price {
								font-size: 28upx;
								font-weight: bold;
							}
						}
						.discount-info {
							line-height: 28upx;
							font-size: 22upx;
							.price {
								font-size: 28upx;
								font-weight: bold;
								color: #f00;
							}
							.items {
								display: flex;
								margin-bottom: 4rpx;
							}
						}
					}
				}
			}

			.time-line {
				.item {
					font-size: 33rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 60rpx;
					line-height: 54rpx;
					color: #999999;
				}

				.deep {
					background: #4278f7;
					height: 36rpx;
				}
			}

			.hour-flex-box {
				display: flex;
				width: 100%;
				margin-top: 20upx;
				padding: 20upx;
				overflow: auto;
				&::-webkit-scrollbar {
					display: none;
				}
				.checked {
					background-color: #204ca2 !important;
				}
				.hour-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					.hour-square {
						width: 20rpx;
						height: 20rpx;
						background-color: #d8d8d8;
						border-radius: 2px;
					}
					.hour-square-blue {
						width: 20rpx;
						height: 20rpx;
						// background-color: #1D2C6D;
						background-color: $uni-theme-color;
						border-radius: 2px;
					}
					.hour-num {
						word-wrap: break-word;
						word-break: keep-all;
						font-size: 18upx;
						width: 14px;
						text-align: center;
					}
				}
			}

			.hour-tip-flex-box {
				display: flex;
				padding: 20upx;
				justify-content: space-between;
				align-items: center;
				.hour-tip-info {
					display: flex;
					.checked {
						background-color: #204ca2 !important;
					}
					.hour-tip-item {
						display: flex;
						align-items: center;
						margin-right: 10px;
						font-size: 20rpx;
						.hour-square {
							width: 20rpx;
							height: 20rpx;
							background-color: #d8d8d8;
							border-radius: 2px;
							margin-right: 14rpx;
						}
						.hour-square-blue {
							width: 20rpx;
							height: 20rpx;
							// background-color: $uni-theme-color;
							background-color: $uni-theme-color;
							border-radius: 2px;
							margin-right: 14rpx;
						}
						.hour-num {
							word-wrap: break-word;
							word-break: keep-all;
							font-size: 18upx;
							width: 14px;
							text-align: center;
						}
					}
				}
				.booking-btn {
					width: 148rpx;
					height: 56rpx;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					color: #fff;
					background: $uni-theme-color;
					font-size: 24rpx;
				}
			}
		}
	}

	.open-control-item {
		margin: 0rpx 0rpx 20rpx 90rpx;
		width: 350rpx;
		text-align: center;
		padding-bottom: 10upx;
	}

	.open-control {
		border: 1upx solid #eee;
	}

	.open-control-door {
		margin: 5upx 10upx;
		line-height: 30px;
		border-radius: 10rpx;
		width: 140rpx;
		background: $uni-theme-color;
		color: #ffffff;
		text-align: center;
	}

	.open-control-room {
		border: 1upx solid #eee;
		display: inline-flex;
		margin: 5upx 10upx;
		line-height: 36px;
		background: $uni-theme-color;
		opacity: 0.8;
		color: #ffffff;
	}

	

	
}
</style>
